<template>
  <div class="mold-bind">
    <el-card class="sur-card">
      <div class="sur-card-title" slot="header">
        <span>正在为规格[{{ skuName }}]绑定模具</span>
        <!--                <el-button type="text" @click="showAddRowDialog">添加模型</el-button>-->
      </div>
      <!--  <el-row>
        <div class="search-section">
          <el-form :inline="true">
            <el-form-item>
              <el-select size="small" placeholder="选择型号"> </el-select>
            </el-form-item>
            <el-form-item>
              <el-button-group>
                <el-button size="small" icon="el-icon-search" @click="onSearch"
                  >查询</el-button
                >
                <el-button
                  size="small"
                  icon="el-icon-refresh"
                  @click="onClearSearchForm"
                  >刷新</el-button
                >
              </el-button-group>
            </el-form-item>
          </el-form>
        </div>
      </el-row>-->
      <el-table :data="bindMolds" border v-loading="loadingTable" size="mini">
        <el-table-column
          label="序号"
          type="index"
          width="55"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="modelName"
          label="型号"
          align="center"
        ></el-table-column>
        <el-table-column prop="moldId" label="绑定模具" align="center">
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.moldId"
              filterable
              size="small"
              placeholder="请选择适配模具"
              @change="onBindMold(scope.row)"
            >
              <el-option-group
                v-for="moldGroup in moldGroups"
                :key="moldGroup.brandId"
                :label="moldGroup.brandName"
              >
                <el-option
                  v-for="mold in moldGroup.molds"
                  :key="mold.id"
                  :label="mold.moldName"
                  :value="mold.id"
                >
                </el-option>
              </el-option-group>
            </el-select>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import {
  bindSkuMold,
  getMoldGroup,
  getSkuMoldBinds
} from "@/api/admin-api/MbCaseMoldApi";

export default {
  name: "SkuMoldBind",
  props: {
    skuId: [],
    skuName: []
  },
  data() {
    return {
      bindMolds: [], //模具列表
      loadingTable: false,
      moldGroups: []
    };
  },
  methods: {
    onClearSearchForm() {
      this.loadSkuMoldBinds();
    },
    loadBrandGroup() {
      getMoldGroup().then(data => {
        this.moldGroups = data;
      });
    },
    onBindMold(row) {
      console.log("绑定好模具", row);
      bindSkuMold(row).then(() => {
        this.$message.success("操作成功");
        this.loadSkuMoldBinds();
      });
    },
    loadSkuMoldBinds() {
      getSkuMoldBinds(this.skuId).then(data => {
        this.bindMolds = data;
        console.log("data", data);
      });
    }
  },

  mounted() {
    this.loadSkuMoldBinds();
    this.loadBrandGroup();
  }
};
</script>

<style scoped>
.mold-bind {
}
</style>
